<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.name" 
          placeholder="名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.company" 
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="handleReset">重置</el-button>
      </div>
 
      <!-- 数据表格 -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120"/>
        <el-table-column prop="end_time" label="结束时间" width="120"/>
        <el-table-column label="实习单位" width="150">
          <template slot-scope="scope">
            {{ scope.row.company  || '-' }}
            <span v-if="scope.row.company_extra"  style="color: #999">
              {{ scope.row.company_extra  }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="weekly_score" label="周报成绩" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.weekly_score  || '-' }}</template>
        </el-table-column>
        <el-table-column prop="summary_score" label="总结成绩" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.summary_score  || '-' }}</template>
        </el-table-column>
        <el-table-column prop="total_score" label="总成绩" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.total_score  || '-' }}</template>
        </el-table-column>
        <el-table-column prop="final_score" label="最终成绩" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.final_score  || '-' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="handleEdit(scope.row)"> 编辑</el-link>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 到 {{ filteredData.length  }} 条，共 {{ filteredData.length  }} 条记录。
      </div>
    </el-card>
 
    <!-- 编辑对话框 -->
    <el-dialog title="编辑实习信息" :visible.sync="dialogVisible"  width="50%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="编号">
          <el-input v-model="editForm.id"  disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editForm.name"></el-input> 
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker 
            v-model="editForm.start_time" 
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker 
            v-model="editForm.end_time" 
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位">
          <el-input v-model="editForm.company"></el-input> 
        </el-form-item>
        <el-form-item label="实习单位补充">
          <el-input v-model="editForm.company_extra"  placeholder="可填写详细公司信息"></el-input>
        </el-form-item>
        <el-form-item label="周报成绩">
          <el-input-number 
            v-model="editForm.weekly_score"  
            :precision="2" 
            :step="0.1" 
            :min="0" 
            :max="100"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="总结成绩">
          <el-input v-model="editForm.summary_score"  disabled></el-input>
        </el-form-item>
        <el-form-item label="总成绩">
          <el-input v-model="editForm.total_score"  disabled></el-input>
        </el-form-item>
        <el-form-item label="最终成绩">
          <el-input v-model="editForm.final_score"  disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      filter: {
        id: '',
        name: '',
        company: ''
      },
      dialogVisible: false,
      editForm: {
        id: '',
        name: '',
        start_time: '',
        end_time: '',
        company: '',
        company_extra: '',
        weekly_score: 0,
        summary_score: '',
        total_score: '',
        final_score: ''
      },
      tableData: [
        {
          id: 13,
          name: '顶岗实习',
          start_time: '2020-08-03',
          end_time: '2020-10-15',
          company: '360',
          weekly_score: '-',
          summary_score: '-',
          total_score: '-',
          final_score: '-'
        },
        {
          id: 14,
          name: '顶岗实习',
          start_time: '2020-08-29',
          end_time: '2020-10-22',
          company: '1',
          weekly_score: '20',
          summary_score: '40.00',
          total_score: '32.0000',
          final_score: '不及格'
        },
        {
          id: 15,
          name: '顶岗实习',
          start_time: '2021-12-01',
          end_time: '2023-02-01',
          company: 'C',
          company_extra: '北京某公司',
          weekly_score: '-',
          summary_score: '-',
          total_score: '-',
          final_score: '-'
        }
      ],
      originalData: [] // 保存原始数据用于重置 
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item  => {
        const idMatch = this.filter.id  ? item.id.toString().includes(this.filter.id)  : true 
        const nameMatch = this.filter.name  ? item.name.includes(this.filter.name)  : true 
        const companyMatch = this.filter.company  ? 
          (item.company  + (item.company_extra  || '')).includes(this.filter.company)  : true 
        return idMatch && nameMatch && companyMatch 
      })
    }
  },
  created() {
    // 保存原始数据 
    this.originalData  = JSON.parse(JSON.stringify(this.tableData)) 
  },
  methods: {
    handleSearch() {
      // 计算属性会自动更新 
      this.$message.success(' 搜索完成')
    },
    handleReset() {
      this.filter.id  = ''
      this.filter.name  = ''
      this.filter.company  = ''
      this.tableData  = JSON.parse(JSON.stringify(this.originalData)) 
      this.$message.success(' 已重置')
    },
    handleEdit(row) {
      // 处理周报成绩的显示问题 
      const weeklyScore = row.weekly_score  === '-' ? 0 : parseFloat(row.weekly_score) 
      
      this.editForm  = {
        ...JSON.parse(JSON.stringify(row)), 
        weekly_score: weeklyScore 
      }
      this.dialogVisible  = true 
    },
    handleSave() {
      // 找到对应的数据项并更新 
      const index = this.tableData.findIndex(item  => item.id  === this.editForm.id) 
      
      if (index !== -1) {
        // 处理周报成绩的显示 
        const weeklyScoreDisplay = this.editForm.weekly_score  === 0 ? '-' : this.editForm.weekly_score.toString() 
        
        const updatedItem = {
          ...this.editForm, 
          weekly_score: weeklyScoreDisplay 
        }
        
        this.$set(this.tableData,  index, updatedItem)
        this.$message.success(' 修改成功')
        this.dialogVisible  = false 
      }
    }
  }
}
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.filter-item {
  margin-left: 10px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
 
.el-table .cell {
  white-space: nowrap;
}
 
.el-link {
  font-size: 13px;
}
</style>